<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="default.css">

    <title>math-player-processor demo</title>
    
    <script type="text/javascript" language="javascript" src="math_proc/math_proc.nocache.js"></script>
    <script language="javascript">
	function add(){
		var expr = document.getElementById('expr');
		var tbl = document.getElementById('tbl');			
		var scr = document.createElement("script");
		var tr = document.createElement("tr");
		var td1 = document.createElement("td");
		var td2 = document.createElement("td");		
		scr.setAttribute("type","text/mml");
		scr.innerHTML = expr.value;
		tbl.appendChild(tr);
		tr.appendChild(td1);
		tr.appendChild(td2);
		td1.innerHTML = "your example";
		td2.appendChild(scr);				
	}
	function process(){
		mathPlayerProcess();
	}
	</script>
  </head>

  <body>
    <h1>math-player-processor demo</h1>

	<span>
    	Insert MathML code here. Type <strong>&lt;gap/&gt;</strong> to insert gap.<br>
		<textarea id="expr" cols="64" rows="3"></textarea><br>
		<input type="button" value="add" onClick="add()" /> - will add the math node to the DOM<br>
		<input type="button" value="process" onClick="process()" /> - wil process all the math nodes  <br>
	</span>
	<br>
	<table border="1" id="tbl">
		<tr><td>fraction, super- and subscript</td><td>
			<script type="text/mml"><mfrac><msub><mn>Z</mn><mn>y</mn></msub><msup><mn>8</mn><mn>9</mn></msup></mfrac></script>
		</td></tr>
		<tr><td>super- and subscript</td><td>
			<script type="text/mml"><msubsup><mn>1</mn><mn>2</mn><mn>3</mn></msubsup></script>
		</td></tr>
		<tr><td>fraction and brackets</td><td>
			<script type="text/mml"><mfenced open='angle' close='round'><mfrac><mn>a</mn><mn>3asdy</mn></mfrac></mfenced></script>
		</td></tr>
		<tr><td>root</td><td>
			<script type="text/mml"><mroot><mn>123</mn><mn>456</mn></mroot></script>
		</td></tr>
		<tr><td>more complicated example</td><td>
			<script type="text/mml"><mroot><mfrac><msub><mn>Z</mn><mn>y</mn></msub><msup><mn>8</mn><mn>9</mn></msup></mfrac><mfenced open='round' close='round'><mfrac><mn>a</mn><mn>3asdy</mn></mfrac></mfenced></mroot></script>
		</td></tr>
	</table>
    
  </body>
</html>
